<!--  -->
<template>
  <div class="detail">
    <!-- 详情页头部 -->
    <div class="detail-header" ref="header" :style="'background:rgba(255,0,0,'+opacity+')'">
      <a class="iconfont icon-jiantou3" onclick="window.history.back()"></a>
      <div class="detail-tabs" :style="'opacity:'+opacity">
        <ul>
          <li
            :class="tabIndex==index?'active':''"
            v-for="(detailTab,index) in detailTabs"
            :key="index"
            @click="changeDetailTab(index)"
          >{{detailTab}}</li>
        </ul>
      </div>
      <a href="javascript:;" class="iconfont icon-shoucang1"></a>
    </div>
    <!-- 详情页轮播图 -->
    <div id="content0">
      <div class="detail-swipe">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(detailData,index) in detailDatas.gallery_list" :key="index">
            <img :src="detailData.img_url" alt />
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <!-- 内容 -->
      <div class="detail-content">
        <div class="wrap">
          <div class="price-wrap">
            <div class="price">{{detailDatas.shop_price}}</div>
            <div class="dprice">{{detailDatas.market_price}}</div>
            <div class="sales">已售{{detailDatas.sales_volume}}件</div>
          </div>
          <div class="share" @click="showShareMask">
            <i class="iconfont icon-fenxiang_2"></i>
            <span>分享</span>
          </div>
        </div>
        <div class="wrap">
          <div class="title">{{detailDatas.goods_name}}</div>
        </div>
        <div class="item">
          <div class="item-title">
            <strong>已选</strong>
            <span>{{buyNum}}件</span>
          </div>
          <div class="item-more" @click="showProductMaskFn">
            <i class="iconfont icon-jiantou2"></i>
          </div>
        </div>
        <div class="item">
          <div class="item-title">
            <strong>送至</strong>
            <span>{{province}}-{{city}}-{{county}}</span>
          </div>
          <div class="item-more" @click="showPopUp">
            <i class="iconfont icon-jiantou2"></i>
          </div>
        </div>
      </div>

      <div style="height:600px;background:pink">省略内容</div>
    </div>
    <div style="height:1000px;background:green" id="content1">
      <h2>评论内容</h2>
    </div>

    <div style="height:1500px;background:blue" id="content2">
      <h2>推荐内容</h2>
    </div>
    <div style="height:2000px;background:#ccc" id="content3">
      <h2>详情内容</h2>
    </div>
    <!-- 发送给好友组件 -->
    <sendFriend v-if="hideSendFriend" @sendDetailFn="hideSend" />
    <!-- 生成海报组件 -->

    <createPoster v-if="hideCreatePoster" @closePosterFn="closePoster" :posterDatas="posterDatas" />
    <!-- 已选蒙版 -->
    <div class="mask" v-if="showProducMask" @click="hideProductMaskFn"></div>
    <transition name="hg">
      <div class="mask-content" v-if="showProducMask">
        <div class="mask-product">
          <div class="close" @click="hideProductMaskFn">
            <i class="iconfont icon-round_delete"></i>
          </div>
          <div class="img">
            <img :src="detailDatas.goods_thumb" alt />
          </div>
          <div class="title-wrap">
            <div class="title">{{detailDatas.goods_name}}</div>
            <div class="price">{{detailDatas.shop_price}}</div>
            <div class="num">
              <span>库存：{{detailDatas.goods_number}}</span>
              <span>编号：{{detailDatas.goods_sn}}</span>
            </div>
          </div>
        </div>
        <div class="num-wrap">
          <div class="num">数量</div>
          <div class="add-num">
            <a href="javascript:;" @click="buyNum>1?buyNum--:1">-</a>
            <input type="text" v-model="buyNum" />
            <a href="javascript:;" @click="buyNum++">+</a>
          </div>
        </div>
        <div class="mask-footer">
          <div class="add-cart" @click="addCartFn">加入购物车</div>
          <div class="buy">立即购买</div>
        </div>
      </div>
    </transition>

    <!-- 选择地址 -->
    <div class="address">
      <mt-popup v-model="popupVisible" position="bottom">
        <div class="title">
          <h2>配送至</h2>
          <i class="iconfont icon-round_delete" @click="hidePopUpViisible"></i>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </mt-popup>
    </div>
    <div class="shareBtn">
      <mt-popup v-model="popupShareVisible" position="bottom" class="popup-bottom">
        <div @click="showSendFriendFn" v-if="isweixin">发送给好友</div>
        <div @click="showCreatePosterFn">生成海报</div>
      </mt-popup>
    </div>

    <!-- 详情页底部 -->
    <div class="detail-footer">
      <div>
        <i class="iconfont icon-dianpu"></i>
        <span>店铺</span>
      </div>
      <div>
        <i class="iconfont icon-kefu"></i>
        <span>客服</span>
      </div>
      <div @click="toCartPage">
        <i class="iconfont icon-gouwuche1"></i>
        <span>购物车</span>
        <div class="num">{{cartnum}}</div>
      </div>
      <div class="cartadd" @click="addCartFn">加入购物车</div>
      <div class="buy">立即购买</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import cities from "@/json/city.json";
import sendFriend from "./components/sendFriend";
import createPoster from "./components/createPoster";
import { isWeiXin } from "@/utils/isWeiXin.js";
//npm i --save lodash.debounce  防抖插件
import debounce from "lodash.debounce";
// console.log(cities);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    createPoster,
    sendFriend,
  },
  data() {
    //这里存放数据
    return {
      detailTabs: ["商品", "评论", "推荐", "详情"],
      tabIndex: 0,
      buyNum: 1,
      showProducMask: false,
      popupVisible: false,
      popupShareVisible: false,
      hideSendFriend: false,
      hideCreatePoster: false,
      isweixin: isWeiXin(),
      slots: [
        {
          flex: 1,
          values: Object.keys(cities),
          className: "slot1",
          textAlign: "right",
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: ["请选择"],
          className: "slot3",
          textAlign: "left",
        },
        {
          divider: true,
          content: "-",
          className: "slot4",
        },
        {
          flex: 1,
          values: ["请选择"],
          className: "slot5",
          textAlign: "left",
        },
      ],
      province: "请选择",
      city: "请选择",
      county: "请选择",
      flag: false,
      opacity: 0,
    };
  },
  computed: {
    detailDatas() {
      return this.$store.state.detailDatas;
    },
    posterDatas() {
      return this.$store.state.posterDatas;
    },
    cartnum() {
      let cartnum = 0;
      this.$store.state.cartDatas.map((item) => {
        cartnum += item.value;
      });
      return cartnum;
    },
  },
  methods: {
    showProductMaskFn() {
      this.showProducMask = true;
    },
    hideProductMaskFn() {
      this.showProducMask = false;
    },
    showPopUp() {
      this.popupVisible = true;
    },
    hidePopUpViisible() {
      this.popupVisible = false;
    },
    onValuesChange(picker, values) {
      //   console.log(Object.keys(cities[values[0]]));
      picker.setSlotValues(1, Object.keys(cities[values[0]]));
      //   console.log(cities[values[0]][values[1]]);
      picker.setSlotValues(2, cities[values[0]][values[1]]);
      this.province = values[0];
      this.city = values[1];
      this.county = values[2];
    },
    showShareMask() {
      this.popupShareVisible = true;
    },
    showSendFriendFn() {
      this.hideSendFriend = true;
      this.hideCreatePoster = false;
    },
    showCreatePosterFn() {
      this.hideCreatePoster = true;
      this.hideSendFriend = false;
    },
    hideSend(data) {
      this.hideSendFriend = data;
      this.popupShareVisible = data;
    },
    closePoster(data) {
      this.hideCreatePoster = data;
      this.popupShareVisible = data;
    },
    // 页面滚动函数
    scrollDetailPage: debounce(function () {
      let headerHeight = this.$refs.header.offsetHeight;
      let top = document.documentElement.scrollTop;
      if (top > 100) {
        let opacity = top / 100;
        if (opacity > 1) {
          opacity = 1;
        }
        this.opacity = opacity;
      } else {
        this.opacity = 0;
      }
      //获取元素
      let contentArr = [];
      contentArr.push(document.getElementById("content0"));
      contentArr.push(document.getElementById("content1"));
      contentArr.push(document.getElementById("content2"));
      contentArr.push(document.getElementById("content3"));
 
      //对象解构
      let { scrollY } = window;
   
      contentArr.reduce((sumContent, content, index) => {
        if (
          !document.getElementById("content0") &&
          !document.getElementById("content1") &&
          !document.getElementById("content2") &&
          !document.getElementById("content3")
        ) {
          return;
        }
        if (sumContent) {
          return sumContent;
        }
        if (this.flag) {
          return;
        }
        if (
          scrollY + headerHeight <=
          content.offsetTop + content.offsetHeight
        ) {
          this.tabIndex = index;
          sumContent = true;
          this.flag = false;
        }
        return sumContent;
      }, 0);
    }, 500),
    //点击头部的tabs
    changeDetailTab(index) {
      console.log("index--" + index);
      this.tabIndex = index;
      this.flag = true;
      //获取元素
      let element = document.querySelector("#content" + index);
      let top =
        element.offsetTop - window.scrollY - this.$refs.header.offsetHeight;
      console.log("scrollY--" + window.scrollY);
      console.log("top--" + top);
      window.scrollBy({ top: top, left: 0, behavior: "smooth" });
    },
    //加入购物车
    addCartFn() {
      //关闭蒙版
      this.showProducMask = false;
      //改造数据
      let detail = this.$store.state.detailDatas;
      //先判断购物车中是否存在当前数据
      var isCart = this.$store.state.cartDatas.find((item) => {
        if (item.goods_id == detail.goods_id) {
          //条件成立说明 购物车列表中存在当前数据
          item.value = item.value + this.buyNum;
        }
        return item.goods_id == detail.goods_id;
      });

      console.log(isCart);
      if (!isCart) {
        var addCartDatas = {
          goods_id: detail.goods_id,
          goods_name: detail.goods_name,
          goods_thumb: detail.goods_thumb,
          shop_price: detail.shop_price,
          value: this.buyNum,
          isSelect: true,
        };
      }
      this.$store.commit("changeCartDatas", addCartDatas);
    },
    toCartPage() {
      this.$router.push("/cart");
    },
  },
  mounted() {
    var goods_id = this.$route.params.goods_id;
    this.$store.dispatch("actChangeDetailDatas", {
      goods_id: goods_id,
    });
    document.addEventListener("scroll", this.scrollDetailPage, false);
  },
  destroyed() {
    document.removeEventListener("scroll", this.scrollDetailPage, false);
  },
};
</script>
<style lang="less">
.hg-enter,
.hg-leave-to {
  transform: translateY(100%);
}
.hg-enter-active,
.hg-leave-active {
  transition: all 0.5s linear;
}
.detail {
  .detail-footer {
    width: 100%;
    height: 4.9rem;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: #fff;
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center;
      position: relative;
      i {
        font-size: 2rem;
      }
      .num {
        position: absolute;
        min-width: 2rem;
        height: 2rem;
        background: #f55;
        color: #fff;
        text-align: center;
        line-height: 2rem;
        border-radius: 1rem;
        right: 0.5rem;
        top: -0.5rem;
      }
    }
    .cartadd {
      flex: 2;
      background: #ffc707;
      color: #fff;
      line-height: 4.9rem;
    }
    .buy {
      flex: 2;
      background: #f55;
      color: #fff;
      line-height: 4.9rem;
    }
  }
  background: #efefef;
  .detail-header {
    width: 100%;
    height: 4.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: #f55;
    a {
      width: 10%;
      display: block;
    }
    .detail-tabs {
      width: 80%;
      ul {
        display: flex;
        li {
          flex: 1;
          font-size: 1.4rem;
        }
        .active {
          color: #fff;
        }
      }
    }
  }
  .detail-swipe {
    width: 100%;
    height: 37.5rem;
    img {
      width: 100%;
      height: 37.5rem;
    }
  }
  .detail-content {
    width: 100%;

    .wrap {
      width: 100%;

      padding: 1rem 1rem 0;
      width: calc(100% - 2rem);
      background: #fff;
      display: flex;
      justify-content: space-between;
      .price-wrap {
        display: flex;
        height: 4.4rem;
        line-height: 4.4rem;
        .price {
          font-size: 2rem;
          color: #f55;
          font-weight: bold;
          &::before {
            content: "￥";
          }
        }
        .dprice {
          font-size: 1.4rem;
          color: #666;
          margin-left: 2rem;
          text-decoration: line-through;
          &::before {
            content: "￥";
          }
        }
        .sales {
          margin-left: 2rem;
        }
      }
      .share {
        text-align: center;
        display: flex;
        flex-direction: column;
      }
      .title {
        font-size: 1.4rem;
        line-height: 2.4rem;
        font-weight: bold;
      }
    }
    .item {
      width: 100%;
      height: 5rem;
      border-bottom: 1px solid #ccc;
      background: #fff;
      padding: 1rem 0 0;
      display: flex;
      justify-content: space-between;
      line-height: 5rem;
      .item-title {
        strong {
          font-size: 1.6rem;
          margin-left: 1rem;
        }
        span {
          font-size: 1.4rem;
          margin-left: 1rem;
        }
      }
      .item-more {
        i {
          margin-right: 1rem;
        }
      }
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
  }
  .mask-content {
    height: 28rem;
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    padding: 1rem;
    width: calc(100% - 2rem);
    .mask-product {
      width: 100%;
      height: 10rem;
      display: flex;
      justify-content: space-between;
      position: relative;
      .close {
        position: absolute;
        right: -1rem;
        top: -1rem;
        width: 4.4rem;
        height: 4.4rem;
        text-align: center;
        line-height: 4.4rem;
        i {
          font-size: 2rem;
          color: #999;
        }
      }
      img {
        width: 10rem;
        height: 10rem;
        border: 1px solid #efefef;
      }
      .title-wrap {
        margin: 0 1rem;
        .title {
          font-size: 1.4rem;
          line-height: 2.2rem;
          height: 4.4rem;
          color: #333;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price {
          font-size: 2rem;
          color: #f55;
          line-height: 4rem;
        }
        .num {
          font-size: 1.4rem;
          color: #666;
          span {
            margin-right: 1rem;
          }
        }
      }
    }
    .num-wrap {
      height: 5rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5rem;
      .num {
        font-size: 1.6rem;
        font-weight: bold;
      }
      .add-num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        a {
          width: 3rem;
          height: 3rem;
          display: block;
          text-align: center;
          line-height: 3rem;
          background: #efefef;
          font-size: 1.6rem;
        }
        input {
          width: 5rem;
          border: 1px solid #efefef;
          height: 3rem;
          box-sizing: border-box;
          text-align: center;
          font-size: 1.4rem;
        }
      }
    }
    .mask-footer {
      width: 100%;
      height: 4.4rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 1rem;
      width: calc(100% - 2rem);
      div {
        width: 46%;
        height: 4.4rem;
        text-align: center;
        line-height: 4.4rem;
        color: #fff;
        font-size: 1.8rem;
        border-radius: 2.2rem;
      }
      .add-cart {
        background: #ffc707;
      }
      .buy {
        background: #f55;
      }
    }
  }
  .address {
    .mint-popup {
      width: 100%;
      .title {
        height: 4.4rem;
        width: 100%;
        background: #fff;
        text-align: center;
        line-height: 4.4rem;
        position: relative;
        i {
          width: 4.4rem;
          height: 4.4rem;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }
  .shareBtn {
    // height: 5rem;
    width: 100%;
    .popup-bottom {
      height: 5rem;
      width: 100%;
      display: flex;
      justify-content: space-around;
      div {
        flex: 1;
        text-align: center;
        line-height: 5rem;
        font-size: 1.4rem;
        &:first-child {
          background: #efefef;
        }
        &:last-child {
          background: #f55;
          color: #fff;
        }
      }
    }
  }
}
</style>












 